<template>
  <div class="wrap">
    <header>
			<svg-icon iconClass="back" @click.stop="$router.push('/layout/home')" style="color:#fff"/>
		</header>
    <div class="head">
      <img src=" http://localhost:4000/yun.png" alt="" />
      <img src=" http://localhost:4000/csy.png" alt="" class="csy" />
    </div>
    <div class="ing">
      <p class="p">—————— 正在进行中 ——————</p>
      <dl>
        <dt>
          <img src="http://localhost:4000/guo.png" alt="" />
        </dt>
        <dd>
          <p>已砍 <b>1589元</b>,仅差<b>00.6%</b></p>

          <van-progress
            class="jd"
            stroke-width="20px"
            pivot-text="已售出10682件"
            color="#9F1519"
            :percentage="50"
          />

          <van-count-down :time="time" class="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>

          <button @click.stop="beginkill">继续砍价</button>
        </dd>
      </dl>
    </div>
    <div class="finish" v-if="false">
      <p class="ok">—————— 已完成 ——————</p>
      <dl>
        <dt>
          <img src="http://localhost:4000/guo.png" alt="" />
        </dt>
        <dd>
          <p><b>恭喜你</b></p>
          <p>砍成一台压力锅，宝贝正在打包发货中</p>
          <p>请注意查收</p>
        </dd>
      </dl>
    </div>
    <div class="top2">
      <div class="list">
        <div class="left">
          <b>小度在家智能屏</b>
          <img src="http://localhost:4000/xdxd.jpg" alt="" />
          <span @click="show = true">点击免费拿</span>
        </div>
        <div class="right">
          <b>小度在家智能屏</b>
          <img src="http://localhost:4000/xdxd.jpg" alt="" />
          <span>点击免费拿</span>
        </div>
        <div class="left">
          <b>小度在家智能屏</b>
          <img src="http://localhost:4000/xdxd.jpg" alt="" />
          <span @click="show = true">点击免费拿</span>
        </div>
        <div class="right">
          <b>小度在家智能屏</b>
          <img src="http://localhost:4000/xdxd.jpg" alt="" />
          <span>点击免费拿</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
    };
  },
  methods: {
    beginkill(){
      localStorage.setItem('key',1)
      this.$router.push('/cheapDetail');
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
header{
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 px2rem(15);
  z-index: 101;
  width: 100%;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #a01619;
}
.wrap {
  width: 100%;
  height: auto;
  background: linear-gradient(to bottom, #ca3439, #e05736);

  .head {
    position: relative;
    width: 100%;
    height: px2rem(330);

    img {
      width: 100%;
      height: px2rem(320);
    }
    .csy {
      position: absolute;
      top: 0;
      left: 0;
      /*  z-index: 1; */
      width: 60%;
      height: px2rem(250);
      margin-left: px2rem(70);
      margin-top: px2rem(80);
    }
  }
  .ing {
    margin-top: px2rem(-20);

    .p {
      display: inline-block;
      color: #eacbca;
      font-size: px2rem(13);
      text-align: center;
      width: 90%;
      height: px2rem(50);
      background: #a01619;
      margin-left: px2rem(20);
      border-radius: 15px 15px 0 0;
      line-height: px2rem(50);
    }
    dl {
      display: flex;
      padding: px2rem(11);
      width: 90%;
      height: px2rem(140);
      background: #fff;
      margin-left: px2rem(20);
      dt {
        width: 40%;
        height: 100%;
        background: #fff;
        img {
          width: 100%;
          height: 80%;
          padding: px2rem(5);
          margin-top: px2rem(10);
        }
      }
      dd {
        width: 60%;
        height: 100%;
        b {
          color: red;
        }

        p {
          display: inline-block;
          font-size: px2rem(14);
          width: 100%;
          height: px2rem(15);
          font-weight: 700;
        }
        .time {
          margin-left: px2rem(5);
          margin-top: px2rem(3);
        }
        button {
          font-size: px2rem(13);
          width: px2rem(130);
          height: px2rem(25);
          border: none;
          border-radius: px2rem(10);
          background: #fd6141;
          color: #fff;
          /*  margin-top: px2rem(3); */
        }
      }
    }
  }
  .finish {
    margin-top: px2rem(20);
    .ok {
      display: inline-block;
      color: #eacbca;
      font-size: px2rem(13);
      text-align: center;
      width: 90%;
      height: px2rem(50);
      background: #a01619;
      margin-left: px2rem(20);
      border-radius: 15px 15px 0 0;
      line-height: px2rem(50);
    }
    dl {
      display: flex;
      width: 90%;
      height: px2rem(140);
      background: #fff;
      margin-left: px2rem(20);
      font-size: px2rem(13);
      img {
        margin-top: px2rem(15);
        padding: px2rem(10);
      }
      dd {
        padding: px2rem(10);
        b {
          color: red;
        }
        p {
          margin-top: px2rem(10);
        }
      }
    }
  }
  .top2 {
    margin-top: px2rem(20);
    margin-left: px2rem(5);
    width: 100%;
    p {
      margin-left: px2rem(15);
      display: inline-block;
      font-size: px2rem(15);

      color: #fff;
      width: 90%;
      height: px2rem(50);
      background: #931111;
      border-radius: px2rem(25);
      text-align: center;
      line-height: px2rem(49);
      font-weight: 700;
    }
    .list {
      width: 90%;/* 
      height: px2rem(180); */
      padding: px2rem(15);
      background: #a22100;
      margin-left: px2rem(15);
      border-radius: px2rem(10);
      display: flex;
      flex-wrap: wrap;
      .left {
        width: 46%;
        height: 85%;
        background: #fddfd5;
        margin-left: px2rem(10);
        margin-top: px2rem(15);
        border-radius: px2rem(8);
        font-size: px2rem(13);
        b {
          margin-top: px2rem(5);
          text-align: center;
          display: inline-block;
          margin-left: px2rem(30);
        }
        img {
          width: 55%;
          height: px2rem(90);
          margin-left: px2rem(35);
          margin-top: px2rem(5);
        }
        span {
          display: inline-block;
          width: 70%;
          height: px2rem(20);
          background: #ef6c37;
          color: #fff;
          line-height: px2rem(20);
          text-align: center;
          border-radius: px2rem(15);
          font-size: px2rem(11);
          margin-left: px2rem(23);
          margin-top: px2rem(5);
        }
      }

      .right {
        width: 46%;
        height: 85%;
        background: #fddfd5;
        margin-left: px2rem(8);
        margin-top: px2rem(15);
        border-radius: px2rem(8);
        border-radius: px2rem(8);
        font-size: px2rem(13);
        b {
          margin-top: px2rem(5);
          text-align: center;
          display: inline-block;
          margin-left: px2rem(30);
        }
        img {
          width: 55%;
          height: px2rem(90);
          margin-left: px2rem(35);
          margin-top: px2rem(5);
        }
        span {
          display: inline-block;
          width: 70%;
          height: px2rem(20);
          background: #ef6c37;
          color: #fff;
          line-height: px2rem(20);
          text-align: center;
          border-radius: px2rem(15);
          font-size: px2rem(11);
          margin-left: px2rem(23);
          margin-top: px2rem(5);
        }
      }
    }
  }
}
</style>